<template>
    <div id="onekan">
        <div v-if="quan"></div>
        <div v-else>
            <div class="kanBG">
                <div class="kanContainer" v-if="cutType!==3">
                    <div class="Profile-picture">
                        <div class="border"><img :src="userInfo.member_avatar" ></div>
                        <p>{{userInfo.member_name}}</p>
                    </div>
                    <div class="content">
                        <p v-if="cutType==1">我在<span style="color: #9948c3;font-size: .32rem;">砍好货</span>发现一件好货，我要砍到1分免费拿~</p>
                        <p v-else>我在<span style="color: #9948c3;font-size: .32rem;">砍好货</span>发现一件好货，快来砍一刀!</p>
                    </div>
                    <div class="pro-container" :id="sku_id" @click="goNewDetali()">
                        <div style="width: 1.5rem;height: 1.5rem;">
                            <img :src="proInfo.pro_img">
                        </div>
                        <div>
                            <p style="-webkit-box-orient: vertical;">{{proInfo.pro_title}}</p>
                            <p style="-webkit-box-orient: vertical;-webkit-line-clamp: 1;color: #646464;font-size: .22rem;line-height: .4rem;">{{proInfo.pro_stand}}</p>
                            <p style="line-height: 0.4rem; color: rgb(153, 72, 195); padding-bottom: .12rem;"><span style="font-size:.24rem">￥</span><span><del style="font-size:.3rem;">{{proInfo.pro_price}}</del></span></p>
                        </div>
                    </div>
                </div>
                <!--随心砍-->
            </div>
            <!--未关注显示二维码-->
            <div class="contexts" v-if="showCutInfo.focusCode!=''" style="background: #fff;margin-bottom: .2rem;">
                <p style="padding-bottom: 0;padding-top: .36rem;">关注砍好货,砍价金额更高</p>
                <img style="margin-left: 1.5rem;" :src="showCutInfo.focusCode">
                <img :src="showCutInfo.imgFinger">
            </div>
            <div class="beginkan" v-if="btnTypes=='NORMAL'">
                <div class="beginkanBg">
                    <p :type="one_box.type">{{detailsType|status}}<br>￥<span>{{one_box.money}}</span></p>
                    <!--<p >br><span></span></p>-->
                    <ul :type="two_box.type">
                        <li>已砍</li>
                        <li>￥{{two_box.money}}</li>
                    </ul>
                </div>
                <div class="beginkanContainer">
                    <a :class="y==0?'btnRed':'btnYellow'" v-for="(x,y) in cutBtn" :type="x.type" @click="cutPay($event)">{{x.btValue}}</a>
                </div>
                <div class="countDown" v-if="timeMsgType==1">
                    <p>还剩<span style="color:#9948c3;">{{timeCount|dateFrm}}</span>结束，快来砍价吧~</p>
                </div>
                <div class="countDown" v-else-if="timeMsgType==2">
                    <p>距付款还剩<span style="color:#9948c3;">{{timeCount|dateFrm}}</span></p>
                </div>
            </div>
            <div>
                <div v-if="cutType==1" :class="showCutList==true?'cutList':'nopaMar'" :style="newRem">
                    <div v-if="showCutList" style="max-height: 9rem;overflow: scroll;">
                        <div class="title">
                            <h3>砍价高手</h3>
                        </div>
                        <div v-for="x in cutZeroList" class="containersCutList">
                            <div class="containers" >
                                <span class="imgBox"><img :src="x.headImg"></span>
                                <div style="margin-left: .24rem;">
                                    <p>{{x.name}}使用了<span style="color:#9948c3;">{{x.weapon}}</span>砍掉了{{x.price}}元 <span :style="x.userType==1||x.userType==2?'color:#ff413a;':'color:#9948c3;'">{{x.userType==1?'(新用户未关注)':x.userType==2?'(新用户已关注)':x.userType==3?'(老用户)':'(发起人)'}}</span></p>
                                    <!--<p v-if="x.coupon_money!=''" style="font-size: .26rem;">获得<span style="color:#9948c3;font-size:.26rem;">{{x.coupon_money}}</span>元优惠券</p>-->
                                    <p style="color: #969696;font-size: .26rem;">{{x.time}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="lookMores" @click="handleMores" style="display: flex;justify-content: center;align-items: center;padding: 0.38rem 0;font-size: 0.28rem;color: rgb(100, 100, 100);background: white;margin-bottom: .2rem;">查看更多<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more_b.png" style="width: .24rem;height: .14rem;margin-left:.06rem;"></div>
                </div>
            </div>
            <div class="ruleContainer">
                <div v-if="cutType==1">
                    <h2 style="text-align: center">活动规则</h2>
                    <p>1.邀请好友帮砍价，砍到任意价均可付款,最低可砍到1分钱,活动时间为发起砍价后6小时，规定时间内，如未付款，砍价活动结束。</p>
                    <p>2.使用多个账号参与活动的，取消获奖资格（每位自然人用户仅能使用一个账号参与活动，微信号、QQ、手机号、银行卡等信息指向同一用户的，视为同一个用户）；</p>
                    <p>3.新用户砍掉金额比老用户多；</p>
                    <p>4.砍到1分的商品每位用户限购2次；同一商品您在48小时之内最多只能发起一次砍价，帮砍者每天最多能帮3个好友砍价；</p>
                    <p>5.活动过程中，凡以不正当手段（包括但不限于作弊、虚假交易、扰乱系统、实施网络攻击等）参与活动的用户，砍好货商城有权终止其参与活动，并取消其获奖资格（如奖品已发放，砍好货商城有权追回）；</p>
                    <p>6.如遇不可抗力（包括但不限于政府指令、活动中存在大面积作弊行为、活动遭受严重网络攻击或系统故障致活动中奖名单大批量出错，活动不能正常进行的），砍好货商城可取消、修改或暂停本活动，砍好货商城可依相关法律法规主张免责；</p>
                    <p>7.砍好货商城拥有最终活动解释权。</p>
                </div>
            </div>
            <div class="templBg" v-if="showTem" @click="Bback"></div>
            <!------------点击弹出海报------------->
            <p v-if="handleShow" style="font-size: 0.28rem;width: 64%;color: #f7c52b;position: fixed;top: 1%;z-index: 9999;left: 18%;">您可长按图片保存，分享到朋友圈或微信群，邀请好友帮您砍价。</p>
            <div class="cutOne" style="position: fixed;top: 9%;left: 10%;border-radius: .2rem;z-index: 999;width: 6rem;height: 10.67rem;" v-if="handleShow">
                <img style="width: 6rem;height: 10.67rem;" :src="showCutInfo.shareCodeImg">
                <span @click="Bback" class="styleX"></span>
            </div>
            <!------------海报按钮------------->
            <div @click="handleClickShow" v-if="showCutInfo.shareCodeImg!=''" class="newPosi2">
                <span>砍价分享海报</span>
            </div>
            <!--未关注砍价完的二维码-->
            <div class="dialog" v-if="showDia" >
                <div class="Profile-picture ">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/knife.png" >
                </div>
                <div class="content">
                    <p font-size=".34rem">砍价成功</p>
                    <p :style="guanzhuIn.tag==2?'':'margin-bottom: .4rem;'">使用<span style="color:#9948c3;">{{cutInfo.cut_weapon}}</span>帮砍了<span style="color:#9948c3;">{{cutInfo.cut_money}}</span>元，</p>
                </div>
                <div class="contexts" v-if="guanzhuIn.tag==2">
                    <img style="margin-left: .7rem;" :src="guanzhuIn.codeUrl">
                    <img :src="guanzhuIn.imgFinger">
                    <p>关注砍好货,砍价更高</p>
                </div>
            </div>
            <!--朋友打开帮砍成功弹框-->
            <div class="dialog" v-if="friendHelp" >
                <div class="Profile-picture ">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/knife.png" >
                </div>
                <div class="content">
                    <p font-size=".34rem">砍价成功</p>
                    <p :style="guanzhuIn.tag==2?'':'margin-bottom: .4rem;'">使用<span style="color:#9948c3;">{{cutInfo.cut_weapon}}</span>帮砍了<span style="color:#9948c3;">{{cutInfo.cut_money}}</span>元，</p>
                </div>
                <div class="contexts" v-if="guanzhuIn.tag==2">
                    <img style="margin-left: .7rem;" :src="guanzhuIn.codeUrl">
                    <img :src="guanzhuIn.imgFinger">
                    <p>关注砍好货,砍价更高</p>
                </div>
            </div>
            <!--随心砍-->
            <div class="num" v-if="KanMoney&&cutType=='1'">
                <div style="margin-top:.9rem">
                    <p>您还可砍<span style="font-size:.44rem;color:#f7c52b;">{{one_box.money}}</span>元</p>
                    <!--<p>点击<span style="font-size:.34rem;color:#f7c52b;">右上角</span>继续分享,</p>-->
                    <p>喊好友帮你砍价吧～</p>
                </div>
            </div>
            <!--一行字弹框-->
            <div class="newContext" v-if="test">
                <p>{{newContext}}</p>
            </div>
            <!--关闭符号-->
            <div class="styleX" v-if="showTems" @click="Bback">
                <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/close_b.png">
            </div>
            <!--逛逛商城-->
            <div class="newPosi" @click="goHome"><span>逛逛商城</span></div>
        </div>

    </div>

</template>

<script>
    import store from "../store/newStore.js";
    import config from "../config/config.js";
    import share from "../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
    export default {
        data(){
            return{
                showTem:false,
                showTems:false,
                showDia:false,
                showTwo:false,
                showReabag:false,
                bagMoney:'',
                userInfo:{},
                proInfo:{},
                cutType:'',
                logic_type:'',
                one_box:{},
                two_box:{},
                cutBtn:[],
                cutRecord:{},
                none:false,
                guanzhu:true,
                showRule:true,
                KanMoney:false,
                guanzhuInfo:Object,
                timer:{},
                timerLoad:{},
                timeCount:null,
                lookMores:true,
                lookDown:false,
                cutZeroList:[],
                showCutList:true,
                detailsType:'',
                timeMsgType:'',
                sku_id:'',
                arrow:false,
                friendHelp:false,
                test:false,
                newContext:'',
                reces:true,
                fixId:'',
                btnType:'0',
                listSub:'',
                listMsg:'',
                couponList:[],
                btnTypes:'',
                cutInfo:'',
                guanzhuIn:'',
                showShow:false,
                showCutInfo:'',
                handleShow:false,
                quan:false,
                pageSize:1,
                cutRecords:'',
                newRem:'',
            }

        },
        computed:{
            ticket(){
                return this.$store.state.getTicket;
            },
        },
        filters:{
            status:function(val){
                switch(val){
                    case 'LOW_PRICE':
                        return "底价";
                    case 'NOW_PRICE':
                        return "当前价";
                }
            },
            dateFrm:function(time){
                return formatSeconds(time)
            }
        },
        methods:{
          // handleDowns(){
          //   // document.getElementsByClassName('cutList')[0].style.height=document.getElementsByClassName('containersCutList')[0].innerHeight*10+'px';
          //   // localStorage.setItem('downheight',document.getElementsByClassName('cutList')[0].style.height);
          //   this.lookDown = false;
          //   this.lookMores = true;
          // },
          handleMores(){
            // var that=this;
            // document.getElementsByClassName('cutList')[0].style.height=document.getElementsByClassName('containersCutList')[0].innerHeight*this.cutZeroList.length+'px';
            // localStorage.setItem('height',document.getElementsByClassName('containersCutList')[0]);
            var that = this;
            if(that.pageSize<this.cutRecords.listNum){
              that.pageSize++
              this.getCutInfo(that.pageSize);
            }
          },
            goHome(){
                this.$router.push("/home/index/00");
            },
          handleClickShow(){
            this.handleShow = true;
            this.showTem = true;
          },
            Bback(){
              this.handleShow= false;
              this.none = false;
              this.showTem = false;
              this.showTems = false;
              this.guanzhu = false;
              this.showReabag = false;
              this.showDia = false;
              this.showTwo = false;
              this.KanMoney=false;
              this.arrow = false;
              this.friendHelp = false;
              this.test=false;
                if(this.showReabag==true){
                    this.$router.push('/home/hot')
                }
            },
            doCut(obj){
                var that=this;
                var value=JSON.stringify({"shareid":obj.shareid,"bt_type":obj.bt_type,"cut_type":obj.cut_type,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/cut/CutButton',{
                    value:value,
                    key:key,
                    ticket:that.ticket
                },config)
                    .then(function(response) {
                        this.code=response.data.code;
                        this.$store.commit('increment',response.data.ticket);
                        if(response.data.code==200){
                            this.getCutInfo(this.pageSize);
                            this.cutInfo = response.data.data.cutInfo;
                            this.guanzhuIn = response.data.data.focusInfo;
                            if(response.data.data.cutInfo.hasMoney==0){
                                this.friendHelp=true;
                                this.showTem=true;
                                this.showTems = true;
                            }else{
                                this.showReabag=true;
                                this.showTem=true;
                                this.showTems = true;
                                this.bagMoney=response.data.data.cutInfo.hasMoney;
                            }
                        }else if(response.data.code==201){
                            this.showTem=true;
                            this.guanzhu=true;
                            this.showTems = false;
                            this.guanzhuInfo=response.data.data;
                        }else{
                            this.test = true;
                            this.showTems = true;
                            this.showTem = true;
                            this.newContext = response.data.msg;;
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            cutPay($event){
                var that=this;
                var e=$event.currentTarget.getAttribute('type');
                var obj={
                    shareid:this.$route.params.shareid,
                    bt_type:e,
                    cut_type:this.logic_type
                };
                if(e=='CUT'){
                    this.doCut(obj);
                }else if(e=='SHARE'){
                    //不请求
                    if(this.cutType==1){
                        this.showTem=true;
                        this.KanMoney=true;
                        this.arrow = true;
                        this.showTems = true;
                    }else{
                        this.showTem=true;
                        this.none=true;
                        this.arrow = true;
                        this.showTems = true;
                    }

                }else if(e=='PAY'){
                    that.orderpay(obj)
                }else if(e=='PUSH'){
                    this.PushCut()
                }else if(e=='PAY_SHARE'){
                    that.orderpay(obj)
                }else if(e=='JUMP_INDEX'){
                    that.goHomeIndex()
                }else if(e=='JUMP_BOOK_ORDER'){
                    this.$router.push("/allorder");
                    sessionStorage.setItem("index",2);
                }else if(e=='JUMP_CUT_ZERO'){
                    that.$router.push('/CutZero/CUT_TO_ZERO')
                }else if(e=='JUMP_ORDER'){
                  this.$router.push("/home/my")
                }

            },
            getCutInfo(pageSize){
                var that=this;
                var value=JSON.stringify({"page":pageSize,"shareid":this.$route.params.shareid,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/cut/ShowCutPage',{
                    value:value,
                    key:key,
                    ticket:this.ticket
                },config)
                    .then(function(response) {
                        this.$store.commit('increment',response.data.ticket);
                        if(response.data.code==200){
                          that.quan = false;
                            var link=this.$route.path;
                            var newLink=link.replace(/\//g,'*');
                            this.userInfo=response.data.data.userInfo;
                            this.cutType=response.data.data.cutInfo.type;
                            this.cutBtn=response.data.data.cutInfo.details.button;
                            this.logic_type=response.data.data.cutInfo.logic_type;
                            this.one_box=response.data.data.cutInfo.details.one_box;
                            this.two_box=response.data.data.cutInfo.details.two_box;
                            this.proInfo=response.data.data.proInfo;
                            // this.cutZeroList=response.data.data.cutRecord.data;
                            this.timeMsgType=response.data.data.cutInfo.timeMsg.msgType;
                            this.timeCount=response.data.data.cutInfo.timeMsg.time;
                            this.btnTypes=response.data.data.cutInfo.details.show_type;
                            this.details_id=response.data.data.proInfo.details_id;
                            this.details_type=response.data.data.proInfo.details_type;
                            this.showCutInfo = response.data.data.cutInfo;
                            this.cutRecords = response.data.data.cutRecord;
                          if(response.data.data.cutRecord.listNum == pageSize){
                            this.$nextTick(function(){
                              var that = this;
                              this.lookMores =false;
                              that.newRem = 'padding-bottom: .5rem;margin-bottom: .2rem;';
                            })
                          }
                          if(this.pageSize==1){
                            this.cutZeroList=response.data.data.cutRecord.data;
                          }else{
                            this.cutZeroList=this.cutZeroList.concat(response.data.data.cutRecord.data);
                          }
                            // if(response.data.data.cutInfo.isJumpRandCut==1){
                            //     this.$router.push("/cutFree/CUT_RANDOM");
                            // }
                            // if(response.data.data.cutInfo.details.coupon_info) {
                            //     this.couponList=response.data.data.cutInfo.details.coupon_info.couponList;
                            //     this.listMsg=response.data.data.cutInfo.details.coupon_info.couponMsg;
                            //     this.listSub=response.data.data.cutInfo.details.coupon_info.subTitle;
                            //     this.btnType=response.data.data.cutInfo.details.coupon_info.type;
                            //     this.fixId=response.data.data.cutInfo.details.coupon_info.fix_id;
                            //     //this.btnType = '2';
                            // }
                            this.$nextTick(function () {
                                this.Countdown();
                            })
                            this.detailsType='NOW_PRICE';
                            this.sku_id=response.data.data.proInfo.details_id;

                            // if(response.data.data.cutRecord.data==''){
                            //     this.showCutList=false;
                            // }else{
                            //     this.showCutList=true;
                            //     this.cutZeroList=response.data.data.cutRecord.data;
                            //     for(var i=0;i<response.data.data.cutRecord.data.length;i++){
                            //         this.$set(this.cutRecord,i,{headImg:response.data.data.cutRecord.data[i]["headImg"],time:response.data.data.cutRecord.data[i]["time"],ticketMoney:response.data.data.cutRecord.data[i]["ticketMoney"],defaultTitle:response.data.data.cutRecord.data[i]["name"]+'使用了'+response.data.data.cutRecord.data[i]["weapon"]+'砍掉了'+response.data.data.cutRecord.data[i]["price"]+'元'},);
                            //     }
                            // }
                                // var cutobj={
                                //     shareid:this.$route.params.shareid,
                                //     bt_type:'CUT',
                                //     cut_type:this.logic_type
                                // };
                                // this.doCut(cutobj);

                            var obj={
                                title:'来帮我砍价:'+this.proInfo.pro_title,
                                desc:'我在砍好货发现一件好货，快来帮我砍一刀，还能获取惊喜哦',
                                /*link:link+'&CKTAG=mta_share.wechat_moments&CKTAG=mta_share.wechat_friend',*/
                                link:newLink,
                                callback:function(){
                                    if(that.$store.state.getCutType==1){
                                        MtaH5.clickStat("zerokan");
                                        MtaH5.clickShare('wechat_friend');
                                        MtaH5.clickShare('wechat_moments');
                                    }else{
                                        MtaH5.clickStat("threekan");
                                        MtaH5.clickShare('wechat_friend');
                                        MtaH5.clickShare('wechat_moments');
                                    }
                                    that.$nextTick(function(){
                                        that.Bback();
                                    })
                                }
                            }
                            share(obj);
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
          orderpay(obj){
              var that = this;
              var a = this.showCutInfo.all_price-this.showCutInfo.now_price;
              var b = parseFloat(a).toFixed(3);
              var cutMoney = b.substring(0,b.toString().length - 1);
            this.$router.push({
              path:'/newOrder',
              query:{
                iscut:2,
                headImg:this.proInfo.sellerLogo,
                name:this.proInfo.sellerName,
                buy_num:1,
                shopImg:this.proInfo.pro_img,
                price_min:this.showCutInfo.now_price,
                price_max:this.showCutInfo.all_price,
                title:this.proInfo.pro_title,
                spec:this.proInfo.pro_stand,
                type:2,
                sku_id:this.proInfo.sku_id,
                cutid:this.$route.params.shareid,
                delivery_price:this.proInfo.delivery_price,
                cutMoney:cutMoney,
              }
            })
          },
            // orderpay(obj){
            //     var _self=this;
            //     var value=JSON.stringify({"shareid":obj.shareid,"bt_type":obj.bt_type,"cut_type":obj.cut_type,"token":localStorage.getItem('token')}),
            //         key=demo(value);
            //     axios.post('/Home/cut/CutButtonPay',{
            //         value:value,
            //         key:key,
            //         ticket:this.ticket
            //     },config)
            //         .then(function(response) {
            //             this.$store.commit('increment',response.data.ticket);
            //             if(response.data.code==210){
            //                 this.$router.push({
            //                     path:'/newOrder',
            //                     query:{
            //                         iscut:2,
            //                         headImg:this.proInfo.pro_img,
            //                         name:this.proInfo.shopName,
            //                         buy_num:1,
            //                         shopImg:this.proInfo.pro_img,
            //                         price_min:this.proInfo.pro_cut_price,
            //                         price_max:this.proInfo.pro_price,
            //                         title:this.proInfo.pro_title,
            //                         spec:this.proInfo.pro_stand,
            //                         type:2,
            //                         sku_id:this.proInfo.sku_id,
            //                         cutid:this.$route.params.shareid,
            //                         delivery_price:response.data.data.delivery_price,
            //                         cutMoney:response.data.data.cutMoney
            //                     }
            //                 })
            //             }else if(response.data.code==201){
            //                 _self.showTem=true;
            //                 _self.guanzhu=true;
            //                 _self.guanzhuInfo=response.data.data;
            //             }else {
            //                 _self.showTem=true;
            //                 _self.newContext=response.data.msg;
            //                 _self.test=true;
            //                 _self.showTems=true;
            //             }
            //         }.bind(this))
            //         .catch(function (error) {
            //             console.log(error);
            //         });
            // },
            Countdown(){
                var _self=this;
                if(_self.timeCount==0){
                    _self.timeCount=0;
                    clearInterval(_self.timerLoad);
                }else{
                    clearInterval(_self.timerLoad);
                    _self.timerLoad=setInterval(function(){
                        _self.timeCount--;
                    },1000)
                }
            },
            goNewDetali($event){
                var detailsId = this.details_id;
                var detailsType = this.details_type;
                this.$router.push('/newDetail/'+detailsId+'/'+detailsType)
            },
            goHomeIndex(){
                this.$router.push('/home/index/00')
            }
        },
        created(){
            this.cutRecord={
                0:{
                    headImg:'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/avatar_b.png',
                    defaultTitle:'等待好友帮砍价',
                    time:''
                },
                1:{
                    headImg:'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/avatar_b.png',
                    defaultTitle:'等待好友帮砍价',
                    time:''
                },
            }
            // this.getCutInfo(this.pageSize);
        },
      mounted(){
        this.quan = true;
      },
        activated(){
          this.getCutInfo(this.pageSize);
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
        },
        deactivated () {
            this.$destroy(true)
        }
    }
</script>

<style scoped>

</style>
